﻿@{
    Layout = null;    
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>实时数据</title>
    <!--引入文件-->
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/datapattern.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <link href="~/Content/BaseStyle.css" rel="stylesheet" />
   
    <script src="~/Scripts/lyUtils.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GPTddZGosGmnZ18nnj2t4jxlL5LuLlT1"></script>

    <style type="text/css">
        #allmap {
            height: 680px;
            width: 100%;
        }

        #r-result {
            width: 100%;
            font-size: 14px;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            //隐藏添加编辑
            //alert(window.location);

            $("#addDiv").css("display", "none");
            $("#editDiv").css("display", "none");
            //给搜索按钮加一个单击事件
            $("#btnSearch").click(function () {
                //获取用户输入的搜索数据.
                var pars = {
                    name: $("#txtSearchName").val(),
                    remark: $("#txtSearchRemark").val(),
                };
                //将获取的搜索的数据发送到服务端。
                loadData(pars)
            });
            loadData();
            loadData1();
        });

        function map_init() {
            var map = new BMap.Map("allmap"); // 创建Map实例  
            var point = new BMap.Point(117.127436, 39.096309); //地图中心点，北京市
       //     map.centerAndZoom("天津", 15);
              map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。  
            map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
            //向地图中添加缩放控件  
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);

            //向地图中添加缩略图控件  
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //向地图中添加比例尺控件  
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            var point = new Array(); //存放标注点经纬信息的数组  
            var marker = new Array(); //存放标注点对象的数组  
            var info = new Array(); //存放提示信息窗口对象的数组  

        

            ////替换部分
            //$.ajax({
            //    type: 'POST',
            //    url: '/GpsNew/GetGps',
            //    //  data: rowData,
            //    dataType: 'json',
            //    success: function (jsonData) {
                    
            //        for (var i = 0; i < jsonData.length; i++) {
            //            var devdata = jsonData[i];
                     
            //            //alert(i);
            //            //alert(i + devdata.shebeibianma);
            //            ////alert(i+"经度："+devdata.gpsjingdu+"纬度:"+devdata.gpsweidu);


            //             var p0 = devdata.gpsjingdu; //  经度

            //             var p1 = devdata.gpsweidu; //纬度
            //            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点  
            //            marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记 

            //            map.addOverlay(marker[i]);


            //            marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  

            //            //相关信息
            //            var label = new window.BMap.Label(devdata.shebeibianma, { offset: new window.BMap.Size(20, -10) });
            //            marker[i].setLabel(label);
            //            info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + "脱轨器编号：" + devdata.tuotuoguiqibianhao + "</br>货场：" + devdata.huochang + "</br>股道：" + devdata.gudaomingcheng + "</br>负责人：" + devdata.fuzeren + "</br>时间：" + convertStrToDate1(devdata.addtime) + "</p>"); // 创建信息窗口对象  
            //        }
            //        marker[0].addEventListener("mouseover", function () {
            //            this.openInfoWindow(info[0]);
            //        });
            //        marker[1].addEventListener("mouseover", function () {
            //            this.openInfoWindow(info[1]);
            //        });
            //        marker[2].addEventListener("mouseover", function () {
            //            this.openInfoWindow(info[2]);
            //        });
            //    }


            //});


        }


        //异步调用百度js  
        function map_load() {
            var load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
            //load.src = "http://api.map.baidu.com/api?v=2.0&ak=GPTddZGosGmnZ18nnj2t4jxlL5LuLlT1";
            document.body.appendChild(load);
        }
        window.onload = map_load;

        function loadData(pars) {
            $('#tt').datagrid({
                url: '/GpsNew/GetDataInfoList',
                title: '实时数据',
                width: 'auto',
                height: 'auto',
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'id',//主键列的列明
                loadMsg: '实时数据...',
                pagination: true,//是否有分页
                singleSelect: true,//是否单行选择
                pageSize: 10,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [10, 20, 30],
                rownumbers:true,
                queryParams: pars,//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
					{ field: 'id', title: '序号', width: 40, hidden: true },
                    
                    { field: 'shangjimingcheng', title: '货运中心', width: 50 },
                    { field: 'huochang', title: '货场', width: 50 },
                    { field: 'gudaomingcheng', title: '股道名称', width: 50 },
                    { field: 'tuoguiqibianhao', title: '脱轨器编号', width: 50 },
                    { field: 'tuoguiqimingcheng', title: '脱轨器名称', width: 50 },
                    { field: 'dianya', title: '电压', width: 50 },
                                     {
                                         field: 'zhuangtai', title: '状态', width: 50,
                                         styler: function (value, row, index) {

                                             if (value == "报警") {
                                                 return 'background-color:red;color:black;';
                                             }
                                             else
                                             {
                                                 return 'background-color:white;color:black;';
                                             }

                                           

                                         }

                                     },
                     { field: 'shebeibianma', title: '设备编号', width: 50 },
                  
                    { field: 'fuzeren', title: '负责人', width: 50 },
                    { field: 'gpsjingdu', title: '经度', width: 50 },
                    { field: 'gpsweidu', title: '纬度', width: 50 },
                    { field: 'bdjingdu', title: 'bdjingdu', width: 50,hidden:true },
                    { field: 'bdweidu', title: 'bdweidu', width: 50, hidden: true },
                 
                    { field: 'hisid', title: 'hisid', width: 50, hidden: true },
      
                   
                  {
                      field: 'addTime', title: '时间', width: 50,

                      formatter: function (value, row, index) {
                          return convertStrToDate1(value);
                        
                          // return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-MM-dd HH:mm:ss");
                      }
                  }

                    // {
                    //     field: 'chakan', title: '查看', width: 100, align: 'center',
                    //     formatter: function (value, row, index) {
                    //         var a = '<a href="#this" onclick="showDetailInfo(' + (row.id) + ')">查看</a>  ';

                    //         return a;
                    //     }
                     //}
                ]],
               
            });
        }

        function loadData1(pars) {
            $('#tt2').datagrid({
                url: '/GpsNew/GetDataInfoList',
                title: '实时数据',
                width: 'auto',
                height: 'auto',
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'id',//主键列的列明
                loadMsg: '实时数据...',
                pagination: true,//是否有分页
                singleSelect: true,//是否单行选择
                pageSize: 10,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [10, 20, 30],
                rownumbers: true,
                queryParams: pars,//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
					{ field: 'id', title: '序号', width: 40, hidden: true },
                     { field: 'shangjimingcheng', title: '货运中心', width: 50 },
                       { field: 'huochang', title: '货场', width: 50 },
                        { field: 'gudaomingcheng', title: '股道名称', width: 50 },
                    { field: 'tuoguiqibianhao', title: '脱轨器编号', width: 50 },
                    { field: 'tuoguiqimingcheng', title: '脱轨器名称', width: 50 },
                     { field: 'dianya', title: '电压', width: 50 },
                    { field: 'shebeibianma', title: '设备编号', width: 50 },
                  {
                      field: 'zhuangtai', title: '状态', width: 50,
                      styler: function (value, row, index) {

                          if (value == "报警") {
                              return 'background-color:red;color:black;';
                          }
                          else {
                              return 'background-color:white;color:black;';
                          }
                      },
                  },

                   
                    { field: 'fuzeren', title: '负责人', width: 50 },
                    { field: 'gpsjingdu', title: '经度', width: 50 },
                    { field: 'gpsweidu', title: '纬度', width: 50 },
                    { field: 'bdjingdu', title: 'bdjingdu', width: 50, hidden: true },
                    { field: 'bdweidu', title: 'bdweidu', width: 50, hidden: true },
                   
                    { field: 'hisid', title: 'hisid', width: 50, hidden: true },
                   
                  {
                      field: 'addTime', title: '时间', width: 50,

                      formatter: function (value, row, index) {
                          return convertStrToDate1(value);
                      }
                  },

                {
                    field: 'caozuo', title: '查看位置', width: 60, align: 'center',
            formatter: function (value, row, index) {

                var a = '<a href="#this" onclick="check(' + (row.gpsjingdu) + ',' + (row.gpsweidu) + ')">查看位置</a>  ';

                return a;
            }
        }
                ]],
                toolbar: [
                  {
                      id: 'btnshuaxin',
                      text: '刷新',
                      iconCls: 'icon-reload',
                      handler: function () {

                          shuaxin();
                      }
                  }
                  
                ],

            });
        }
        function shuaxin() {
        
            var map = new BMap.Map("allmap");
           // var point = new BMap.Point(x, y);  // 创建点坐标
            var point = new BMap.Point(117.127436, 39.096309);
            map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
        }
    </script>

</head>
<body class="easyui-layout" data-options="fit:true">

    <!--展示数据-->
    @*<div data-options="region:'north',title:'查询条件',split:true,border:false,collapsed:true" style="height:90px;overflow:hidden;">
            <table class="tableForm datagrid-toolbar" style="width:100%;height:100%;">

                <tr>
                    <td>
                        组织单位:
                        <input id="zuzhidanwei" class="easyui-combobox" name="zuzhidanwei"
                               data-options="valueField:'DepId',textField:'DepName',url:'/Department/GetDataByLevel?level=3'" />
                        <a id="btnsearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
                        <a id="btnundo" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">取消</a>

                    </td>

                </tr>
            </table>
        </div>*@




    <div id="ttwertwert" class="easyui-tabs" data-options="region:'center'">
        <div title="列表模式" style="padding: 0px; display:block;" data-options="fit:true">
            <table id="tt" style="width: 700px;" title="标题" iconcls="icon-edit"></table>
        </div>
        <div title="地图模式" data-options="fit:true" style="overflow:auto;">

            <div id="cc" class="easyui-layout" style="width: 100%; height:730px;">

                <div data-options="region:'west'" style="width:600px;">


                    @*<table id="tt1" style="width:400px;" title="标题" iconcls="icon-edit"></table>
                        <br />
                        <br />
                        <br />*@
                    <table id="tt2" style="width:600px;" title="标题" iconcls="icon-edit"></table>
                </div>
                <div data-options="region:'center'" style="padding:5px;background:#eee;">

                    <div id="allmap"></div>

                </div>

            </div>
        </div>

    </div>




    <!--添加数据-->
    <div id="addDiv" style="display:none; overflow:hidden;">
        <iframe id="addFrame" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
    </div>
    <div id="editDiv" style="display: none; overflow: hidden;">
        <iframe id="editFrame" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
    </div>
</body>
</html>
<script type="text/javascript">


    function check(jingdu, weidu) {

        var x = jingdu;
        var y = weidu;


        var ggPoint = new BMap.Point(x, y);

        //地图初始化
        var bm = new BMap.Map("allmap");
        bm.centerAndZoom(ggPoint, 15);
        bm.addControl(new BMap.NavigationControl());
        bm.enableScrollWheelZoom(true);

        //坐标转换完之后的回调函数
        translateCallback = function (data) {
            //  alert("2222");
            if (data.status == 0) {
                //   alert(data.points[0]);
                var marker = new BMap.Marker(data.points[0]);
                bm.addOverlay(marker);
                //var label = new BMap.Label("转换后的百度坐标（正确）", { offset: new BMap.Size(20, -10) });
                //marker.setLabel(label); //添加百度label
                //bm.setCenter(data.points[0]);
                //var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + "脱轨器编号：" + tuoguiqibianhao + "</br>货场：" + huochang + "</br>股道：" + gudao + "</br>状态：报警" + "</p>"); // 创建信息窗口对象  

                //bm.openInfoWindow(info, data.points[0]);//打开信息窗口  

                //markergg.addEventListener("click", function () {
                //    bm.openInfoWindow(info, ggPoint);//打开信息窗口  
                //});

            }
        }

        setTimeout(function () {
            
                var convertor = new BMap.Convertor();
                var pointArr = [];
                pointArr.push(ggPoint);
                convertor.translate(pointArr, 1, 5, translateCallback)
            

        }, 1000);











     //   var map = new BMap.Map("allmap");
     //   var point = new BMap.Point(x, y);  // 创建点坐标
     //   map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
     //   var marker = new BMap.Marker(point);
     //   map.addOverlay(marker);
     ////   BMap.Convertor.translate(point, 0, translateCallback);     //真实经纬度转成百度坐标

     //   //坐标转换完之后的回调函数
     //   translateCallback = function (data) {

     //       if (data.status === 0) {
     //           var marker = new BMap.Marker(data.points[0]);
     //           bm.addOverlay(marker);
     //           var label = new BMap.Label("转换后的百度坐标（正确）", { offset: new BMap.Size(20, -10) });
     //           marker.setLabel(label); //添加百度label
     //           bm.setCenter(data.points[0]);
     //       }
     //   }


     //   setTimeout(function () {
     //       var convertor = new BMap.Convertor();
     //       var pointArr = [];
     //       pointArr.push(ggPoint);
     //       convertor.translate(pointArr, 1, 5, translateCallback)
     //   }, 1000);

    }

    // 用经纬度设置地图中心点
    function theLocation() {
        if (document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") {
            map.clearOverlays();
            var new_point = new BMap.Point(document.getElementById("longitude").value, document.getElementById("latitude").value);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
        }
    }
</script>
